<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="message_style.css"/>
</head>

<body>
    <header id="header">
      <div id="chat" onclick="changechat();">
        <div style="position:relative;">聊天<!--i id="reminder1"></i--></div>
        <div id="line1"></div>
      </div>
      <div id="notice" onclick="changenotice();">
        <div style="position:relative;">通知<!--i id="reminder2"></i--></div>
        <div id="line2"></div>
      </div>
    </header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    var header;
    var headerH;
    var footerH;
    apiready = function() {
      $api.setStorage('user_id', 'e3b3dc8d20b7052f5c0799f3aa4e9f3e');
      header = $api.byId('header');
      headerH = $api.offset(header).h;
      api.openFrame({
          name: 'chat',
          url: './chat.html',
          bounces: true,
          rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
              marginTop: headerH+6, // main页面距离win顶部的高度
              w: api.winWidth // main页面的宽度 自适应屏幕宽度
          }
      });
    };
    function changechat(){
        api.closeFrame({
            name: 'notice'
        });
        api.openFrame({
            name: 'chat',
            url: './chat.html',
            bounces: true,
            rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
                marginTop: headerH+6, // main页面距离win顶部的高度
                marginBottom: footerH, // main页面距离win底部的高度
                w: api.winWidth // main页面的宽度 自适应屏幕宽度
            }
        });
        document.getElementById("notice").style.color="black";
        //document.getElementById("reminder2").style.visibility="hidden";
        document.getElementById("chat").style.color="blue";
        //document.getElementById("reminder1").style.visibility="visible";
        document.getElementById("line1").style.visibility="visible";
        document.getElementById("line2").style.visibility="hidden";
    }
    function changenotice(){
      api.closeFrame({
          name: 'chat'
      });
      api.openFrame({
          name: 'notice',
          url: './notice.html',
          bounces: true,
          rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
              marginTop: headerH+6, // main页面距离win顶部的高度
              marginBottom: footerH, // main页面距离win底部的高度
              w: api.winWidth // main页面的宽度 自适应屏幕宽度
          }
      });
      document.getElementById("chat").style.color="black";
      //document.getElementById("reminder1").style.visibility="hidden";
      document.getElementById("notice").style.color="blue";
      //document.getElementById("reminder2").style.visibility="visible";
      document.getElementById("line2").style.visibility="visible";
      document.getElementById("line1").style.visibility="hidden";
    }
</script>

</html>
